<template>
    <div class="flex-main">
        <div class="flex-body">
            <div class="m-ment ">
                <div class="m-proInfo">
                    <img :src="spelling.Cover" alt="">
                    <div>
                        <p>{{spelling.ProjectName}}</p>
                        <span>&yen;{{spelling.Price}}</span>
                    </div>
                    <em>x1</em>
                </div>
                
            </div>
            <div class="m-ment">
                <p class="m-mentP">支付方式</p>
                <ul class="m-choose-type">
                    <li>
                        <img src="@/assets/images/weixin@2x.png" alt="">
                        微信支付
                        <img src="@/assets/images/choose_2@2x.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="p1 bg-white" v-html="spelling.Content"></div>
        </div>
        <div class="flex-bottom">
            <div class="m-toPay">
                <span>&yen;{{moneyTotal}}</span>
                <button @click="payOrder">订单支付</button>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex';
import {spellingDetail,pintuanPay} from '@/api/spelling';
export default {
    name:'',
    data () {
        return {
            isGood:false,       //是否包含产品，产品可选择门店和收货地址
            isSend:'nosend',       //是否门店配送
            orderDetail:[],         //多个详情集合
            moneyTotal:0,       //总订单金额
            quantityTotal:0,    // 总订单数量
            base_url:process.env.API_HOST,
            spelling:'',        //拼团详情
            spelling_id:'',     //与人拼团的拼团id
        }
    },
    computed:{
        ...mapState({
            buydata:state=>state.projectBuydata.buydata,
            chooseAddr:state=>state.mine.chooseAddr,
        })
    },
    methods:{
        // 获取拼团详情
        getDetail(id) {
            let that = this;
            spellingDetail({id:id}).then(result=>{
                that.spelling = result.detail;
                this.$indicator.close();
            })
        },
        // 订单支付
        payOrder() {
            let that = this;
            let shipping_status = that.isSend=='send' ? 1 : 0;
            let param = {
                openid:'oavnv0xp3G8CWXECVelORjVg5Hw0',
                customer_id:'0091001709',
                CardClassId:that.spelling.id,
                quantity:1,
                price:that.spelling.Price,
                spelling_id:that.spelling_id,
                order:'',
                superiorid:'',
                customer_spelling_id:'',
            }
            that.$messagebox.confirm(that.spelling.ProjectName,'确定购买').then(action=>{
                pintuanPay(param).then(result=>{
                    console.log(result);
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', result.data,
                        function(res) {
                            // WeixinJSBridge.log(res.err_msg);
                            if (res.err_msg == 'get_brand_wcpay_request:ok') {
                                //- 支付成功
                                
                            } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                                // 取消支付
                                

                            } else {
                                $.confirm('支付失败!');
                            }
                        }
                    );
                }).catch(error=>{});
            }).catch(error=>{});
            
        },
    },
    mounted() {
        this.$indicator.open('加载中...');
        let spellingid = this.$route.query.spellingid;
        this.getDetail(spellingid);
    },
    created() {     //创建生命周期时，判断用户id是否登录
        console.log(this.buydata);
    }
}
</script>
<style lang="less" scoped src="@/less/payment/payment.less"></style>
